<template>
    <div class="pad20">
        <div class="filter-container">
            <!--查询的表单数据-->
            <el-form :inline="true" :model="map" size="mini">
                <el-form-item label="店铺名称：">
                    <el-input v-model.trim="map.name"></el-input>
                </el-form-item>
                <el-form-item label="商品名称:">
                    <el-input v-model.trim="map.goodsname"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button icon='el-icon-search' type="primary" @click="handleCheck">查询</el-button>
                    <el-button icon='el-icon-refresh' class="filter-item" @click="handleReset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--数据表格-->
        <el-table
                :data="list"
                style="width: 100%">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="订单编号" style="margin-left: 50px">
                            <span>{{ props.row.orderid }}</span>
                        </el-form-item >
                        <el-form-item label="店铺名称" style="margin-left: 300px">
                            <span>{{ props.row.shop.name }}</span>
                        </el-form-item>
                        <br/>
                        <el-form-item label="商品名称"  style="margin-left: 50px">
                            <span>{{ props.row.goods.goodsname }}</span>
                        </el-form-item>
                        <el-form-item label="用户昵称" style="margin-left: 300px">
                            <span>{{ props.row.user.nickname }}</span>
                        </el-form-item>
                        <el-form-item label="评论时间" style="margin-left: 300px">
                            <span>{{ props.row.gmtCreate }}</span>
                        </el-form-item><br/>
                        <div id="content">
                            <el-form-item label="评论内容" style="margin-left: 50px">
                                <span>{{ props.row.content }}</span>
                            </el-form-item>
                        </div>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column type="index" label="序号" width="100" align="center">
            </el-table-column>

            <el-table-column width="200"
                    label="订单编号"
                    prop="orderid">
            </el-table-column>

            <el-table-column
                    label="评论"
                    show-overflow-tooltip="true"
                    prop="content">
            </el-table-column>
            <el-table-column label="操作" width="300">
                <template slot-scope="scope">
                    <el-button  type="danger" @click="del(scope.row.id)" size="mini" icon="el-icon-delete">删除评论</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                style="float: right;margin-top: 20px; margin-bottom: 22px"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-size="page.pageSize"
                :page-sizes="[5, 8, 10, 15, 20, 30]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.totalCount">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "remarkInfo",
        data() {
            return {
                visible: false,
                map: {
                    pageCurrent:0,
                    pageSize:0,
                },
                list: [],
                page: {
                    // beginPageIndex: 1,
                    currentPage: 1,
                    // endPageIndex: 8,
                    pageCurrent: 1,
                    pageSize: 5,
                    totalCount: 0,
                    totalPage: 0
                },
                srcList: [''],
                infoList: [],
            }
        },
        created() {
            this.searchRemark()
        },
        methods: {
            del(id){
                this.$http.post("/remark/remark/deleteById?id="+id).then(result=>{
                    console.log(result)
                    if (result.data.code==2000){
                        this.$notify({
                            title: '删除成功',
                            message: '下架违规评论',
                            type: 'success'
                        });
                        this.searchRemark();
                    }
                })
            },
            // 评论分页列表接口
            searchRemark(){
                var that =this
                // this.map.pageCurrent = this.page.pageCurrent;
                // this.map.pageSize = this.page.pageSize;
                this.$http.post("/remark/remark/findAll?currentPage="+this.page.pageCurrent+"&pageSize="+this.page.pageSize,this.map).then(function (resp) {
                    console.log(resp)
                    if (resp.data.code==2000){
                        that.list = resp.data.data.list
                        that.page.totalCount = resp.data.data.total
                        // that.page.pageSize = resp.data.data.size
                    }
                })
            },
            //查询
            handleCheck() {
                this.searchRemark();
            },
            // 重置查询条件
            handleReset() {
                this.reload()
            },
            // 刷新当前页面
            reload() {
                this.map = {}
                this.searchRemark()
            },
            handleSizeChange(val) {
                this.page.pageSize = val
                this.searchRemark()
            },
            handleCurrentChange(val) {
                this.page.pageCurrent = val
                this.searchRemark()
            },

        }
    }

</script>

<style scoped>
    /*.demo-table-expand {*/
    /*    font-size: 0;*/
    /*}*/
    /*.demo-table-expand label {*/
    /*    width: 50px;*/
    /*    color: #99a9bf;*/
    /*}*/
    /*.demo-table-expand .el-form-item {*/
    /*    column-span: 1;*/
    /*    margin-right: 0;*/
    /*    margin-bottom: 0;*/
    /*    width: 30%;*/
    /*}*/
    #content{
        margin-right: 0;
        width: 100%;
    }
</style>